iT邦幫忙

DAY 13
1

Sass3.3 & CSS設計模式系列 第 14

Sass教學 (13) - susy2 - 如何打造susy2開發環境

  • 分享至 

  • xImage
  •  

Yes
影片教學請點選下圖連結↓

以下文章同步於Github

進入主題
目前已經有軟體可以編譯Sass與Susy2,
例如Fire.app、codekit等等,
你不用安裝繁瑣的環境,透過軟體就可以直接編譯Sass,
我目前用的軟體是Fire.app,而目前他也已釋出了Sass3.4、Compass 1.0的版本,
更重要的是它內建就安裝好了Susy 2和Breakpoint的功能,開發上也變得相當方便,
在去年我也曾經為了Fire.app寫了一篇圖影教學,

如果你希望能夠自己在電腦建立環境的話,
那就可以照著我的教學來逐步學習:

安裝流程
Mac內建就有安裝Ruby,
如果你是用Windows的話,
則就再必須安裝Ruby環境,
確認好Ruby環境後,
打開Mac的terminal、Windows的命令提示字元輸入:

gem install sass
//送出後就會開始下載,接著再輸入

gem install compass

gem install susy

gem install breakpoint

//susy有用到breakpoint,所以也必須安裝

如果都安裝好後,
要確認有沒有安裝成功, 可以輸入gem list後可以看到你裝了哪些gem,
如果發現四個都有安裝,那就表示你安裝成功了。

建立專案
首先你必須先在terminal上先到你指定的位置去, mac的指定方式如下:

cd /Users/gonsakon/Desktop 
// cd後面接路徑, gonsakon要換成你的電腦名稱

好了後,要建立專案就輸入:

compass create project 
//project是你命名的資料夾名稱

輸入完後你就會發現桌面上多了一個project的資料夾, 裡面就會有一些相關的檔案,
打開project資料夾後,
裡面會有一個config.rb的檔案,
把他打開以後,
在最上面寫上這兩行後儲存, 這是為了讓Compass專案能夠載入susy與breakpoint的功能,

require 'susy'
require 'breakpoint'

輸入好以後,
在到terminal上輸入cd project進入到project資料夾後, 再打:

compass watch

這個語法的用意是,
關注你目前所在的資料夾,
當你編譯儲存時,compass會自動幫你編譯Sass檔案成CSS檔,

接著我們就到sass檔案寫:

@import 'susy';
@import 'breakpoint';
$susy: (
    columns: 12,
    gutters: 1/3,      
    column-width:60px,
    math: fluid,      
    output: float,
    gutter-position: after,
);
.wrap{
    @include container;
}

//編譯出來的CSS
.wrap {
  max-width: 940px;
  margin-left: auto;
  margin-right: auto;
}
.wrap:after {
  content: " ";
  display: block;
  clear: both;
}

如果CSS有成功編譯出來,
那就代表你成功了,enjoy it!


上一篇
Sass教學 (12) - susy2 - 使用with layout讓版型同時存在兩種以上的Grid
下一篇
Sass教學 (14) - @extend 與 @Mixin的差異性與使用時機
系列文
Sass3.3 & CSS設計模式46
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言